<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="referrer" content="never">
    <title>回顾</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }
    </style>
</head>
<body>

    offset
        Width/Height    当前元素占据页面的尺寸 width/height + padding + border
        Top/Left        距离 offsetParent 的边框的上左边距
        Parent          最近的带定位的父元素,没有就返回body。如果元素的定位是fixed定位，那么返回的值是null

    client
        Width/Height    元素的可视内容宽高  width/height + padding 
            如果有滚动条：- 滚动条宽度
        Top/Left        元素上左边框的宽度

    scroll
        Width/Height    width/height + padding
            内容超出：   width/height + padding（上左）
                        overflow：padding（上左下）
        Top/Left        元素滚动条卷入的上左边距


    页面可视区域宽高：window.innerWidth/Height(带滚动条)  html.clientWidth/Height(不带滚动条)
    页面卷入宽高：window.pageX/YOffset || html.scrollTop || body.scrollTop
    

    <!-- 巩顾/冯玲玲/ 检查失败 -->

    页面效果：滚动跟随/无限滚动/滚动进度/滚动条改变状态

    window.getComputedStyle(ele, 伪元素/null)  元素所有样式键值对组成的对象
    window.getBoundingClientRect()  元素offsetWidth/Height 四周与页面的上左边距

    BOM
        URL：协议+域名/IP+端口+路径 +查询参数+锚点
        同源：协议+域名/IP+端口 三者完全一致
        window.open(URL, [a.target], [新窗口的属性]) 打开新的网页  返回值可以调用 close() 方法关闭新打开的页面
        history  保存当前标签页面打开的历史记录对象
            length 历史记录长度
            go(n)  跳转n个页面，为0刷新当前页
            forward()/back()  前进/后退一页
        location  保存当前URL信息
            location.search 页面传值   encoded(编码) decoded(解码)
            location = URL 跳转
            location.href = URL 跳转
            location.assign(URL) 跳转
            location.replace(URL)  替换当前页
            location.reload(是否强制刷新)
        navigator 保存当前浏览器相关信息对象
            userAgent 判断浏览器环境
            onLine 网络环境是否在线
        requestAnimationFrame  在下次浏览器刷新执行回调函数
            时间型动画： 已过时间/总时间 = 已走路程/总路程

    
    HTML5补充信息
        JS操作媒体元素
            进度   .currentTime/.duration
            播放/暂停 play()/pause()
            播放速度  playbackRate
            声音 volume
        
        Web存储
            localStorage
                + 存储时间：除非手动删除，否则一直存在
                + 同源页面共享
            sesstionStorage
                + 存储时间：关闭当前页面清除存储内容
                + 单页面共享
            方法：
                setItem(key, value)
                getItem(key)
                removeItem(key)
                clear()
                key(index)/length
        
        可编辑
            contentEditable  替代编辑元素内容
            document.designMode = "on"
         
        拖拽属性  draggable="true"  可拖拽元素，被拖拽出灵魂
            dragstart 应用于拖拽元素，记录拖拽信息
                dragleave/drag/dragend
            dragover  应用于目标元素（与拖拽元素交互的元素），阻止默认事件，让 drop 事件可以执行
            drop 应用于目标元素，当鼠标在其中释放拖拽元素时执行
                dragleave/dragenter

            event.dataTransfer 应用于（dragstart/drop)
                setData(type, value)
                getdata(type)
                removeData(type)
        
        全屏属性  E.requestFullScreen  document.exitFullScreen

        

    <script type="text/javascript">
        
    </script>
</body>
</html>